<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/admin/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">房间号</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="room" placeholder="输入房间号">
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">MAC</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="mac" placeholder="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否在线</label>
                            <div class="layui-input-inline">
                                <select id="online" name="online">
                                    <option value="">不限</option>
                                    <option value="1">在线</option>
                                    <option value="0">离线</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="layui-inline">
                <button style="margin-left: 50px" id="btnSearch" class="layui-btn layuiadmin-btn-admin" type="button"
                        lay-filter="LAY-user-back-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                </button>
            </div>
        </div>


    </div>
</div>

<script type="text/html" id="jieban">
    <!--
    {{#  if (d.online==0) {  }}
    <input type="button" value="上线" class="layui-btn layui-btn-sm" lay-event="key"/>
    {{# }else{  }}
    <input type="button" value="离线" class="layui-btn layui-btn-sm" lay-event="key"/>
    {{# }  }}
    -->
    <input type="button" value="解绑" class="layui-btn layui-btn-sm" lay-event="jiebang"/>
</script>

<table id="t" lay-filter="t">
</table>
</body>
</html>

<script>
    var table = layui.table;
    table.render({
        elem: "#t",
        url: "/room/search",
        id: 'tt',
        cols: [[
            {title: "序号",unresize: true, width: "80", align: "center", fixed: "left",templet:function(d){
                        return '<div>' + (d.LAY_TABLE_INDEX+1) + '</div>';
                }},
            {field: 'room',unresize: true, title: "房间号", width: "100", align: "center"},
            {field: 'mac', title: "MAC", width: "160", align: "center"},
            {field: 'createTime', title: "创建时间", width: "180", align: "center"},
            {field: 'online', title: "是否在线", width: "100", align: "center",
                templet: function (d) {
                    return d.online == 1 ? "<span style='color:green'>在线</span>" : "离线";
                }
            },
            {field: 'type', title: "型号", width: "100", align: "center"},
            {field: 'ver', title: "版本", width: "150", align: "center"},
            {title: "操作", width: "100", align: "center", toolbar: '#jieban'}
        ]],
        page: true
    });

    var form = layui.form;
    form.render('select');

    var $ = layui.$;
    $("#btnSearch").click(function () {
        //layer.msg("测试工",{icon:1,time:1000})
        table.reload('tt', {
            where: {
                mac: $("#mac").val(),
                room: $("#room").val(),
                online: $("#online").val()
            },
            page: {curr: 1}
        });

    });

    //    右侧按钮的的监听事件
    table.on('tool(t)', function (obj) {
        var getdata = obj.data //获得当前行数据
        var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (layEvent) {
            case 'jiebang':
                layer.confirm("确定要解绑吗?",["确定","取消"],function(){



                      $.ajax({
                          url:'/room/jiebang',
                          data:{id:getdata.id},
                          success:function(data){
                                if (data.code==200)
                                {
                                    layer.msg("解绑成功",{icon:1,time:1000},function(){
                                        tr.remove();
                                    });
                                }else{
                                    layer.msg(data.msg,{icon:1,time:1000});
                                }
                          }
                      })
                });
                break;
        }
    });


</script>